<template>
    <div class="shop_detail_container">
        <HeaderTop :goBack="true" :headTitle="'店铺详情'"></HeaderTop>
        <section class="activities_container">
            <header class="header_title">活动与属性</header>
            <ul class="actibities_ul">
                <li v-for="item in shopDetail.activities" :key="item.id">
                    <span class="icon_name" :style='{backgroundColor: "#" + item.icon_color}'>{{item.icon_name}}</span>
                    <span class="icon_desc">{{item.description}}(APP专享)</span>
                </li>
            </ul>
            <ul class="actibities_ul">
                <li v-for="item in shopDetail.supports" :key="item.id">
                    <span class="icon_name" :style="{backgroundColor:`#${item.icon_color}`}">{{item.icon_name}}</span>
                    <span class="icon_desc">{{item.description}}(APP专享)</span>
                </li>
            </ul>
        </section>
        <section class="shop_status_container">
            <router-link class="shop_status_header" to="/shop/shopDetail/shopSafe">
                <span>食品监督安全公示</span>
                <div>
                    <span class="identification_detail">企业认证详情</span>
                    <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow" >
                        <path d="M0 0 L8 7 L0 14"  stroke="#bbb" stroke-width="1.5" fill="none"/>
                    </svg>
                </div>
            </router-link>
            <section class="shop_statu_detail">
                <div>
                    <svg v-if="shopDetail.status == 1">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#res-well"></use>
                    </svg>
                    <svg v-else>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#res-bad"></use>
                    </svg>
                </div>
                <div class="check_date">
                    <p>
                        <span>监督检查结果：</span>
                        <span class="shop_status_well" v-if="shopDetail.status == 1">良好</span>
                        <span class="shop_status_bad" v-else>差</span>
                    </p>
                    <p>
                        <span>检查日期：</span>
                        <span>{{shopDetail.identification.identificate_date && shopDetail.identification.identificate_date.split('T')[0]}}</span>
                    </p>
                </div>
            </section>
        </section>
        <section class="shop_status_info">
            <header>商家信息</header>
            <p>商家名称: {{shopDetail.name}}</p>
            <p>地址：{{shopDetail.address}}</p>
            <p>营业时间：[{{shopDetail.opening_hours[0]}}]</p>
            <p @click="showLicenseImg(shopDetail.license.business_license_image)">
                <span>营业执照</span>
                <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow" >
                    <path d="M0 0 L8 7 L0 14"  stroke="#bbb" stroke-width="1.5" fill="none"/>
                </svg></p>
            <p @click="showLicenseImg(shopDetail.license.catering_service_license_image)">
                <span>餐饮服务许可证</span>
                <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow" >
                    <path d="M0 0 L8 7 L0 14"  stroke="#bbb" stroke-width="1.5" fill="none"/>
                </svg>
            </p>
        </section>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState(['shopDetail']),
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.shop_detail_container{
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f2;
    padding-top: 1.95rem;
    z-index: 18;
    .activities_container{
        margin-top: 0.5rem;
        background: #fff;
        .header_title{
            padding: 0.3rem 0.5rem ;
            @include sc(0.75rem,#333);
            border-bottom: 0.025rem solid #f2f2f2;
        }
        .actibities_ul{
            padding: 0 0.5rem;
            li{
                .icon_name{
                    @include sc(0.5rem,#fff);
                    padding: 0.1rem;
                    border-radius: 0.1rem;
                }
                .icon_desc{
                    @include sc(0.55rem,#444);
                }
            }
        }
    }
    .shop_status_container{
        margin-top: 0.5rem;
        background: #fff;
        .shop_status_header{
            padding: 0.3rem 0.5rem;
            @include fj;
            align-items: center;
            border-bottom: 0.025rem solid #f2f2f2;
            span{
                @include sc(0.75rem,#333);
            }
            .identification_detail{
                color: #888;
            }
        }
        .shop_statu_detail{
            display: flex;
            padding: 0.5rem;
            svg{
                @include wh(2rem,2rem);
            }
            .check_date{
                display: flex;
                flex-direction: column;
                margin-left: 0.5rem;
                span{
                    @include sc(0.6rem,#666);
                }
                .shop_status_well{
                    color: $green;
                }
                .shop_status_bad{
                    color: red;
                }
            }
        }
    }
    .shop_status_info{
        margin-top: 0.5rem;
        background: #fff;
        header{
            padding: 0.3rem 0.5rem ;
            @include sc(0.75rem,#333);
            border-bottom: 0.025rem solid #f2f2f2;
        }
        p{
            @include sc(0.6rem ,#666);
            margin-left: 0.3rem;
            padding: 0.5rem 0.3rem 0.5rem;
            border-bottom: 0.025rem solid #f1f1f1;
        }
        p:nth-of-type(4),p:nth-of-type(5){
            @include fj;
        }
    }
}
</style>